<template>
    <div class="member">
        <div class="top">
            <div class="usercon">
                <div class="imgcover">
                    <img src="https://iconfont.alicdn.com/t/1550728574104.jpg@100h_100w.jpg" alt="">
                </div>
                <div class="userinfo">
                    <div class="nickname"><h1>{{nickname}}</h1><p class="tag">{{shenfen}}</p></div>
                    <p>{{phone}}</p>
                </div>
            </div>
        </div>
		<div class="middle">
			<van-cell-group >
			  <van-cell title-class="title" value-class="value" title="身份证号" :value='formatMobile(this.mess)' />
			  <van-cell title-class="title" value-class="value" title="合作区域" :value="内容" />
			  <van-cell title-class="title" value-class="value" title="区域经理" :value="内容" />
			  <van-cell title-class="title" value-class="value" title="我的上级" :value="内容" />
			</van-cell-group>
			<van-cell-group >
			  <van-cell title-class="title" value-class="value" title="我的公司" :value="内容" />
			  <van-cell title-class="title" value-class="value" title="公司地址" :value="内容" />
			  <van-cell title-class="title" value-class="value" title="公司证件" :value="内容" />
			  <van-cell title-class="title" value-class="value" title="客户级别" :value="内容" />
			</van-cell-group>
			<van-cell-group>
			  <van-cell title="我的收货地址"  icon="location-o" is-link to="minadd" />
			  <van-cell title="修改密码"  icon="lock" is-link @click="verification(phone)" />
			</van-cell-group>
		</div>
		<div class="exit">
			<button>退出登录</button>
		</div>
      <!-- <div class="card">
        <div class="card-header"><span>我的订单</span><span></span></div>
        <div class="card-content">
          <div class="panel cardpanel">
            <div class="panelitem">
              <div class="item-icon"><van-icon name="pending-payment" /></div>
              <div class="item-title">待付款</div>
            </div>
            <div class="panelitem">
              <div class="item-icon"><van-icon name="send-gift-o" /></div>
              <div class="item-title">待发货</div>
            </div>
            <div class="panelitem">
              <div class="item-icon"><van-icon name="logistics" /></div>
              <div class="item-title">待收货</div>
            </div>
            <div class="panelitem">
              <div class="item-icon"><van-icon name="comment-o" /></div>
              <div class="item-title">评论</div>
            </div>
            <div class="panelitem">
              <div class="item-icon"><van-icon name="refund-o" /></div>
              <div class="item-title">售后</div>
            </div>
          </div>
        </div>
      </div> -->
    </div>
</template>
<script>
    import Vue from 'vue';
    import {Field, Toast, Icon, Cell, CellGroup} from 'vant';

    Vue.use(Field).use(Toast).use(Icon).use(Cell).use(CellGroup);

    export default {
        name: "member",
        data() {
            return {
				nickname:"从此不敢看观音",
				shenfen:"站长",
				phone:"13333333333",
				mess:"411023199402140018"
			}
        },
        mounted() {
        },
        created() {
        },
        methods: {
			formatMobile(mobile) {
			        return mobile.substr(0, 6) + '********' + mobile.substr(14, 17);
			    },
			verification(phone){
				this.$router.push({
				          name: 'verification',
				          params: {
				            phone: this.phone
				          }
				        })
			}
			
		},
        components: {}
    }

</script>

<style lang="scss" scoped>
  .member{
	  width: 100%;
	  height: 90%;
	  background:url(../assets/bg.png) no-repeat 100% 100% ;
    .top {
      // background: linear-gradient(to right, #ffd01e, #ff6034);
      margin-bottom: 10px;

      .usercon {
        padding: 16px;
        display: flex;

        .imgcover {
          margin-left: 5px;
          width: 50px;
          height: 50px;
          border-radius: 25px;
          border: 1px solid #fff;
          overflow: hidden;

          img {
            width: 100%;
          }
        }
      }

      .userinfo {
        padding-left: 20px;
        h1{font-size: 16px;color: #fff; margin: 0; line-height: 32px;}
        p{font-size: 13px; color:#fff; margin: 0; line-height: 20px}
		.nickname{
			display: flex;
			align-items: center;
			.tag{
				margin-left: 5px;
				background-color: #EB713B;
				padding: 0 5px;
				color: #FFDF94;
			}
		}
      }
      .userpanel{
        padding: 10px;
        .panelitem{
          color: #fff;
          width: 25%;
          .item-num{font-size: 13px;}
          .item-title{font-size: 13px;}
        }
      }
    }
	.middle{
		width: 90%;
		margin: 0 auto;
		.van-cell-group{
			margin-top: 10px;
			.title,.value{
				flex: unset;
				color: #969799;
			}
			.van-cell__value{
					margin-left: 15px;
					color: #000;
			}
		}
		// display: flex;
		// justify-content: space-between;
		// flex-direction: column;
		// align-items: center;
	}
	.exit{
		width: 90%;
		margin: 10px auto;
		button{
			width: 100%;
			outline: none;
			background-color: #FF5D3B;
			border: none;
			line-height: 40px;
			color: #fff;
			font-family: Source Han Sans CN;
			border-radius: 4px;
		}
		
	}
    // .panel{
    //   display: flex;
    //   justify-content: space-between;
    //   .panelitem{
    //     text-align: center;
    //   }
    // }

  //   .card {
  //     font-size: 14px;
  //     position: relative;
  //     overflow: hidden;
  //     margin: 10px;
  //     border-radius: 5px;
  //     background-color: white;
  //     background-clip: padding-box;
  //     -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, .1);
  //     box-shadow: 0 1px 3px rgba(0, 0, 0, .1);

  //     .card-header, .card-footer {
  //       position: relative;
  //       display: -webkit-box;
  //       display: -ms-flexbox;
  //       display: flex;
  //       padding: 10px;
  //       -webkit-box-pack: justify;
  //       -ms-flex-pack: justify;
  //       justify-content: space-between;
  //       -webkit-box-align: center;
  //       -ms-flex-align: center;
  //       align-items: center;
  //     }

  //     .card-header {
  //       font-size: 14px;
  //       border-radius: 2px 2px 0 0;
  //       border-bottom:1px solid #eeeeee;
  //       span{ font-weight: bold}
  //     }
  //     .card-footer {
  //       color: #6d6d72;
  //       border-radius: 0 0 2px 2px;
  //       border-top:1px solid #c7c7cc;
  //     }

  //     .card-content {
  //       font-size: 14px;
  //       position: relative;
  //       display: block;
  //       padding: 5px;
  //       .cardpanel{
  //         .panelitem{
  //           width: 18%;
  //           .item-icon{font-size: 25px;
  //             i{
  //               color:  #ff6034;
  //             }


  //           }
  //           .item-title{font-size: 13px; color: #323232}
  //         }
  //       }
  //     }


  //   }
  
  }

</style>